<template>
    <div class="qilin-QilinDialog">
        <el-dialog
            v-model="ownDialogConfig.isShow"
            :title="ownDialogConfig.title || '提示' "
            :top="ownDialogConfig.top"
            :close-on-click-modal="ownDialogConfig.closeOnClickModal"
            :close-on-press-escape="ownDialogConfig.closeOnPressEscape"
            :modal="ownDialogConfig.modal"
            :append-to-body="ownDialogConfig.appendToBody"
            :width="ownDialogConfig.width || '600px' "
            :center="ownDialogConfig.center"
            :class="ownDialogConfig.className"
            :before-close="handleClose"
        >
            <slot name="extra"></slot>
            <slot></slot>
            <template v-slot:footer v-if="!ownDialogConfig.isHideFooter">
                <template v-if="ownDialogConfig.additionalButton && ownDialogConfig.additionalButton.length > 0">
                    <el-button
                        v-for="(item,index) in ownDialogConfig.additionalButton"
                        :key="index"
                        :type="item.btnType || 'default' "
                        :size="item.btnSize || 'default' "
                        @click="item.click && item.click() "
                    >{{item.btnText || "额外按钮" }}</el-button>
                </template>
                <el-button
                    v-show="ownDialogConfig.closeBtnShow"
                    :type="ownDialogConfig.closeBtnType || 'default' "
                    :size="ownDialogConfig.closeBtnSize || 'default' "
                    @click="handleClose"
                >
                    {{ownDialogConfig.closeBtnText || "取消" }}
                </el-button>
                <el-button
                    v-show="ownDialogConfig.confirmBtnShow"
                    :type="ownDialogConfig.confirmBtnType || 'default' "
                    :size="ownDialogConfig.confirmBtnSize || 'default' "
                    @click="emits('submitConfirm')"
                >
                    {{ownDialogConfig.confirmBtnText || "确定" }}
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import Qilin from "qilin-utils";

// 接收父组件传来的值
const propsValue=defineProps({
    dialogConfig:{
        type:Object,
        default(){
            return {}
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["handleClose","submitConfirm"]);

// 组件自身的配置项
let ownDialogConfig=reactive({
    isShow:false, //是否显示弹窗
    title:"提示", //弹窗标题
    top:"15vh", //margin-top值--会对拖拽造成影响
    closeOnClickModal:false, //是否可以通过点击阴影部分即modal关闭弹窗
    closeOnPressEscape:false, //是否可以通过按下ESC关闭弹窗
    modal:true, //是否需要遮罩层
    appendToBody:true, //弹窗元素自身是否插入到body元素上去
    width:"600px", //弹窗的宽度
    className:"", //弹窗的自定义类名
    center:false, //弹窗头部和底部是否水平居中
    confirmBtnText:"确定", //确认按钮的文字信息
    confirmBtnType:"primary", //确认按钮的类型
    confirmBtnSize:"default", //确认按钮的大小
    confirmBtnShow:true, //确认按钮显示与否
    closeBtnText:"取消", //取消按钮的文字信息
    closeBtnType:"default", //取消按钮的类型
    closeBtnSize:"default", //取消按钮的大小
    closeBtnShow:true, //取消按钮显示与否
    additionalButton:[ //额外按钮的相关信息配置项
        // {
        //     btnText:"额外按钮",
        //     btnType:"default",
        //     btnSize:"small",
        //     click:"click"
        // }
    ],
    isHideFooter:false //是否隐藏脚部元素
});

// 将接收到的配置项赋值给组件自身
const initOwnDialogConfig=(target)=>{
    ownDialogConfig=Qilin.Common.deepCopy(target,ownDialogConfig);
};
// 点击关闭按钮事件监听
const handleClose=()=>{
    emits("handleClose"); //调用父组件自定义方法
};

// 监听父组件传来的数据值，实时更新
watch(propsValue.dialogConfig,(newValue,oldValue)=>{
    initOwnDialogConfig(newValue);
},{immediate:true,deep:true});

</script>

<style lang="scss" scoped>

</style>
